<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../src/css/common/reset.css">
    <link rel="stylesheet" href="../../src/css/common/grid.css">
    <script src="../../src/lib/jquery.min.js"></script>
    <script src="./three.js"></script>
</head>
<body>
    <div class="container">
        <div style="margin:0 auto;" id="demo1">

        </div>
    </div>
</body>

<script>
    self.para = {
        w:500,
        h:500,
        ratio:1
    }

    $(function(){

        $("#demo1").css({
            width:para.w + 'px',
            height:para.h + 'px'
        });


        function animation(time) {
            mesh.rotation.x = time / 2000;
            mesh.rotation.y = time / 1000;
            renderer.render(scene, camera);
        }

        function init() {

            camera = new THREE.PerspectiveCamera(70, para.ratio, 0.01, 10);
            camera.position.z = 1;

            scene = new THREE.Scene();

            geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
            material = new THREE.MeshNormalMaterial();

            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

            renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.setSize(para.w, para.h);
            renderer.setAnimationLoop(animation);
            //document.body.appendChild(renderer.domElement);
            $('#demo1').append(renderer.domElement)
        }
        function animation(time) {
            mesh.rotation.x = time / 2000;
            mesh.rotation.y = time / 1000;
            renderer.render(scene, camera);
        }
        //init();



        function init2(){
            scene = new THREE.Scene()
            camera = new THREE.Camera();
            renderer = new THREE.WebGLRenderer({
                antialias: true,
                alpha: true,
                //canvas
            })
            renderer.setSize(para.w, para.h);

            markerGroup = new THREE.Group()
            scene.add(markerGroup)

            const torusGeo = new THREE.TorusKnotGeometry(0.3, 0.1, 64, 16)
            const torusMat = new THREE.MeshNormalMaterial();
            torus = new THREE.Mesh(torusGeo, torusMat);
            torus.position.y = 0.5;
            markerGroup.add(torus);

           /* const cubeGeo = new THREE.CubeGeometry(1, 1, 1);
            const cubeMat = new THREE.MeshNormalMaterial({
                transparent: true,
                opacity: 0.5,
                side: THREE.DoubleSide
            })
            cube = new THREE.Mesh(cubeGeo, cubeMat);
            cube.position.y = 0.5
            markerGroup.add(cube)*/

            renderer.render( scene, camera );

            $('#demo1').append(renderer.domElement)
        }
        init2();


    })


</script>
</html>